<template>
  <div>
    <v-chart class="chart" :option="option" style="width:800px" />
  </div>
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

export default defineComponent({
  name: "HelloWorld",
  components: {
    VChart,
  },
  props: ["datalist"],
  provide: {
    [THEME_KEY]: "white",
  },
  setup(props) {
    console.log(props.datalist);
    const option = ref({
      //  title: {
      //     text: '某站点用户访问来源',
      //     subtext: '纯属虚构',
      //     left: 'center'
      // },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      toolbox: {
        show: true,
        orient: "vertical",
        left: "right",
        // top: "center",
        feature: {
          // mark: {show: true},
          // dataView: { show: true, readOnly: false, Text: "数据视图" },
          // magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
          // restore: {show: true},
          saveAsImage: { show: true },
        },
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "50%",
          // data: [
          //     {value: 1048, name: '搜索引擎'},
          //     {value: 735, name: '直接访问'},
          //     {value: 580, name: '邮件营销'},
          //     {value: 484, name: '联盟广告'},
          //     {value: 300, name: '视频广告'}
          // ],
          data: props.datalist,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    });

    return { option };
  },
});
</script>
<style>
.chart {
  height: 400px;
}
</style>
